<template>
  <div class="loader">
    <div class="block-1"></div>
    <div class="block-2"></div>
    <div class="block-3"></div>
    <div class="block-4"></div>
    <div class="block-5"></div>
    <div class="block-6"></div>
    <div class="block-7"></div>
    <div class="block-8"></div>
    <div class="block-9"></div>
    <div class="block-10"></div>
    <div class="block-11"></div>
    <div class="block-12"></div>
    <div class="block-13"></div>
    <div class="block-14"></div>
    <div class="block-15"></div>
    <div class="block-16"></div>
  </div>
</template>

<script>
export default {
  name: "loading25",
  data() {
    return {};
  }
};
</script>

<style scoped="true">
* {
  box-sizing: border-box;
}
.loader {
  height: 60px;
  transform: translateX(-50%) translateY(-50%);
  width: 60px;
}
.loader div {
  animation: load 4s ease-in-out infinite;
  background: #fff;
  display: block;
  height: 12px;
  opacity: 0;
  position: absolute;
  width: 12px;
}
.loader div.block-1 {
  animation-delay: 0.92s;
  left: 0px;
  top: 0px;
}
.loader div.block-2 {
  animation-delay: 0.84s;
  left: 16px;
  top: 0px;
}
.loader div.block-3 {
  animation-delay: 0.76s;
  left: 32px;
  top: 0px;
}
.loader div.block-4 {
  animation-delay: 0.68s;
  left: 48px;
  top: 0px;
}
.loader div.block-5 {
  animation-delay: 0.6s;
  left: 0px;
  top: 16px;
}
.loader div.block-6 {
  animation-delay: 0.52s;
  left: 16px;
  top: 16px;
}
.loader div.block-7 {
  animation-delay: 0.44s;
  left: 32px;
  top: 16px;
}
.loader div.block-8 {
  animation-delay: 0.36s;
  left: 48px;
  top: 16px;
}
.loader div.block-9 {
  animation-delay: 0.28s;
  left: 0px;
  top: 32px;
}
.loader div.block-10 {
  animation-delay: 0.2s;
  left: 16px;
  top: 32px;
}
.loader div.block-11 {
  animation-delay: 0.12s;
  left: 32px;
  top: 32px;
}
.loader div.block-12 {
  animation-delay: 0.04s;
  left: 48px;
  top: 32px;
}
.loader div.block-13 {
  animation-delay: -0.04s;
  left: 0px;
  top: 48px;
}
.loader div.block-14 {
  animation-delay: -0.12s;
  left: 16px;
  top: 48px;
}
.loader div.block-15 {
  animation-delay: -0.2s;
  left: 32px;
  top: 48px;
}
.loader div.block-16 {
  animation-delay: -0.28s;
  left: 48px;
  top: 48px;
}

@keyframes load {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  15% {
    opacity: 0;
    transform: translateY(-100px);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  85% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}
</style>
